<template>

  <view class="content">
    <public-header title="打印机日志"></public-header>
    <view class="bottom-content">
      <uni-card>
        <view class="" style="padding-bottom: 7rem;display: flex;flex-direction: column;height: 100%;">
          <view style="display: flex;padding-bottom: 2rem;align-items: center;">
            <view style="width: 40rem;margin-right: 10rem;">
              <uni-data-select v-model="value" :localdata="range" @change="change" label="打印机类型">
              </uni-data-select>
            </view>

            <view class="marginRight">
              <u-button @click="clickFn('today')" :customStyle="type != 'today'?normal:active">
                今天
              </u-button>
            </view>

            <view class="marginRight">
              <u-button @click="clickFn('yesterday')" :customStyle="type != 'yesterday'?normal:active">
                昨天
              </u-button>
            </view>

            <view class="marginRight">
              <u-button @click="clickFn('seven')" :customStyle="type != 'seven'?normal:active">
                近七天
              </u-button>
            </view>

            <view>
              <u-button @click="clickFn('clear')" :customStyle="gray">
                清空
              </u-button>
            </view>
          </view>

            <table-list :columns="column" :stripe="true" :data="data"></table-list>
            <!-- <zb-table :columns="column" :stripe="true" :data="data"></zb-table> -->
            <uni-pagination show-icon="false" :total="total" :pageSize="rownumber" :current="pageNo"
              @change="changePage"></uni-pagination>
        </view>

      </uni-card>
    </view>

  </view>
</template>

<script>
  export default {
    name: "btable",
    data() {
      return {
        pageNo: 1,
        total: 0,
        rownumber: 6,
        gray: {
          marginRight: '2rem',
          fontWeight: 500,
          height: '6rem !important',
          background: `rgba(229, 229, 229, 1) !important`,
          color: 'black !important',
          "font-size": '2.4rem'
        },
        active: {
          marginRight: '2rem',
          fontWeight: 500,
          height: '6rem !important',
          background: 'rgba(56, 192, 158, 1) !important',
          color: 'white !important',
          'font-size': '2.4rem'
        },
        normal: {
          marginRight: '2rem',
          fontWeight: 500,
          height: '6rem !important',

          color: 'black !important',
          'font-size': '2.4rem'
        },
        type: '',
        value: "商品标签打印",
        list: [],
        range: [{
            "value": "商品标签打印",
            "text": "商品标签打印",
          },

          {
            "value": "订单小票打印",
            "text": "订单小票打印"
          }
        ],
        loading: false,
        totalRow: ['sales', 'orders', 'saleroom', 'sales_task_p', 'gross', 'test2'],
        column: [
          //      {
          // 	name: 'goods_no',
          // 	label: '商品编号',
          // 	fixed: true,
          // 	width: 30,
          // 	emptyString: '--',
          // 	align: 'center',
          // },
          {
            name: 'dev_sn',
            label: '设备编号',
            width: 40,
            align: 'center',
            // filters: {
            // 	0: '男',
            // 	1: '女'
            // }
          },
          {
            name: 'print_time',
            label: '打印时间',
            fixed: true,
            width: 40,
            align: 'center',
          },

          {
            name: 'state',
            label: '打印状态',
            align: 'center',
            width: 30,
          },
          {
            name: 'remark',
            label: '备注',
            width: 50,
            align: 'center',
          },
          {
            name: 'type',
            label: '设备类型',
            width: 50,
            align: 'center',
          },
          // {
          // 	name: 'store_name',
          // 	label: '店铺名称',
          // 	align: 'center',
          // 	width: 40,
          // },
          // {
          // 	name: 'dev_name',
          // 	label: '设备名称',
          // 	width: 30,
          // 	align: 'center',
          // },

          {
            name: 'type',
            label: '打印类型',
            width: 30,
            align: 'center',
          },
          {
            name: 'store_no',
            label: '店铺编号',
            width: 40,
            align: 'center',
          },
          // {
          // 	name: 'remark',
          // 	label: '备注说明',
          // 	width: 80,
          // 	align: 'center',
          // },
          // {
          // 	name: 'state',
          // 	label: '状态',
          // 	width: 10,
          // 	align: 'center',
          // },
          {
            name: 'content',
            label: '打印请求内容',
            width: 50,
            align: 'center',
          },
          {
            name: 'create_time',
            label: '创建时间',
            width: 40,
            align: 'center',
          }
        ],
        data: []
      }
    },
    methods: {
      upx2px(value) {
        //#ifndef MP-WEIXIN
        return uni.upx2px(value) + 'rem'
        //#endif
        //#ifdef MP-WEIXIN
        return uni.upx2px(value)
        //#endif
      },
      change(val) {
        console.log(val, '-what is val-')
        this.value = val;
        this.getList();
      },
      clickFn(passData) {
        this.type = passData;
        this.getList()
      },
      rowClick(e) {
        console.log(e)
      },
      pullup() {
        console.log('上拉')
      },
      changePage(e) {
        const {
          type,
          current
        } = e
        this.pageNo = current
        this.getList()
      },
      getList(data) {
        uni.showLoading({
          title: "加载中"
        })
        const url = `/retail/select/srvretail_print_log_select`;
  
        let nowDate = new Date();
        let condition = [];
        if (this.type == 'today') {
          condition.push({
            "colName": "create_time",
            "value": this.dayjs().format("YYYY-MM-DD 00:00:00"),
            "ruleType": "gt"
          })
          condition.push({
            "colName": "create_time",
            "value": this.dayjs().format("YYYY-MM-DD 23:59:59"),
            "ruleType": "le"
          })

        } else if (this.type == 'yesterday') {
          condition.push({
            "colName": "create_time",
            "value":this.dayjs(new Date()).subtract(1,'day').format("YYYY-MM-DD 00:00:00"),
            "ruleType": "gt"
          })
          condition.push({
            "colName": "create_time",
            "value": this.dayjs(new Date()).subtract(1,'day').format("YYYY-MM-DD 23:59:59"),
            "ruleType": "le"
          })
        } else if (this.type == 'seven') {
          let start = this.dayjs(new Date()).subtract(7,'day').format("YYYY-MM-DD 00:00:00")
          let end = this.dayjs().format("YYYY-MM-DD 23:59:59")
          condition.push({
            "colName": "create_time",
            "value": start,
            "ruleType": "gt"
          })
          condition.push({
            "colName": "create_time",
            "value": end,
            "ruleType": "le"
          })
        }

        condition.push({
          "colName": "type",
          "value": this.value,
          "ruleType": "eq"
        })

        const req = {
          "serviceName": "srvretail_print_log_select",
          "colNames": ["*"],
          "condition": condition,
          "relation_condition": {},
          "page": {
            "pageNo": this.pageNo,
            "rownumber": this.rownumber
          },
          "order": [],
          "draft": false,
          "query_source": "list_page"
        }

        this.$http.post(url, req).then(res => {
          if (res?.data?.state === 'SUCCESS') {
            console.log(res, "res--res--")
            res.data.data.forEach((item) => {
              item.uuid = this.getUuid();
            })
            this.data = res.data.data;
            this.total = res?.data?.page?.total||0
          }

          uni.hideLoading()
        }).catch(_ => {
          uni.hideLoading()
        })
      }

    },
    created() {
      this.getList();
      uni.getSystemInfo({
        success(res) {

          console.log(JSON.stringify(res), "--pixelRatio---pixelRatio")
        }
      });
    },
    onLoad() {
      uni.getSystemInfo({
        success(res) {

          console.log(JSON.stringify(res), "--pixelRatio---pixelRatio")
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .marginRight {
      margin-right: 2rem;
    }

    .bottom-content {
      flex: 1;
      overflow: hidden;
      padding-bottom: 38px;

      /deep/ .uni-card {
        height: 100%;
        display: flex;
        flex-direction: column;
      }
    }
  }

  .content /deep/ .uni-card__content {
    flex: 1;
    overflow: hidden;


  }

  .content /deep/ .zb-table-content {
    height: 100% !important;
    // background: green !important;
  }

  .content /deep/ .zb-table-scroll {
    height: 100% !important;
  }

  // .zb-table-content{

  // }

  .uni-progress {
    color: red;

    /deep/ .uni-progress-info {
      font-size: 1rem !important;
    }
  }

  ::v-deep .uni-stat__select {
    .uni-label-text {
      font-size: 2.4rem;
    }

    .uni-select {
      font-size: 2.4rem;
      line-height: 6.8rem;
      min-height: 6.8rem;

      .uni-select__input-text {
        font-size: 2.4rem;
        line-height: 6.8rem;
        min-height: 6.8rem;
      }
    }

  }
</style>
